<!--框架页面视图-->
<template>
  <div class="page-header-index-wide warp" id="fwIframe">
    <iframe v-for="(item,index) in iframeList" v-if="item"
            :key="index"
            v-show="item.show"
            :ref="item.name"
            :src="item.src"
            frameborder="0"
            width="100%"
            :height="iframeHeight"
            scrolling="auto"/>
  </div>
</template>
<script>
  import { openIFrame, deleteDynamicRouters } from '@/utils/util'
  import { mapState } from 'vuex'
  export default {
    name: "IframePageContent",
    data () {
      return {
        iframeList:[],
        url: "",
        id:"",
        iframeHeight:"100px",
      }
    },
    created () {
      this.goUrl()
    },
    computed: {
      ...mapState({
        // 菜单tbs
        pathPageList: state => state.app.pathPageList,
        activePage: state => state.app.activePage
      })
    },
    mounted(){
      // 父vue的window上添加postMessage的监听，并且绑定处理函数handleMessage
      window.addEventListener('message', this.handleMessage);
      // 向父vue页面发送信息
      // window.parent.postMessage({
      //   cmd: 'openIFrame',
      //   params: {
      //     name: 'home',
      //     path: '/home',
      //     title: '我真的不知道',
      //     url: 'http://localhost:8083',
      //   }
      // }, '*');
      this.setIFrameHeight();
    },
    updated () {
      this.goUrl();
      this.setIFrameHeight();
    },
    watch: {
      'pathPageList':function(newList){
        if(!newList || newList.length==0){
          this.iframeList = [];
          return;
        }
        //保留相同的，去掉删除的，新增加入的
        if(this.iframeList && this.iframeList.length>0){
          for (let i=0;i<this.iframeList.length;i++) {
            let frame = this.iframeList[i];
            if(frame) {
              let flag = true;
              for (let item of newList) {
                if (frame.name === item.name) {
                  flag = false;
                  break;
                }
              }
              if (flag) {//新数组里面没有对应元素，需要删除
                delete this.iframeList[i]
              }
            }
          }
        }
        //查找需要新增的
        for (let item of newList) {
          let flag = true;
          for (let frame of this.iframeList) {
            if(frame){
              if(item.name === frame.name){
                flag = false;
                break;
              }
            }
          }
          if(flag){
            let obj = {
              src: item.meta.url,
              name: item.name,
              fullPath: item.fullPath,
              show: this.activePage===item.fullPath
            }
            this.iframeList.push(obj)
          }
        }
      },
      $route(to, from) {
        for (let item of this.iframeList) {
          if(item){
            if (item.name === to.name) {
              item.show = true
            } else {
              item.show = false
            }
          }
        }
      }
    },
    methods: {
      goUrl () {
        let id = this.$route.path;
        this.id = id
        // if (url !== null && url !== undefined) {
        //   if(url.indexOf('?') != -1){
        //     let newUrl = url.split("?");
        //     url = newUrl[0]+"?from=vue&" + newUrl[1];
        //   }else {
        //     url+="?from=vue";
        //   }
        //   this.url = url;
        // }
      },
      handleMessage(event){
        const data = event.data;
        switch (data.cmd) {
          case 'openIFrame':
            openIFrame(data.params.name,data.params.path,data.params.title,data.params.url)
            this.$router.push({ name: data.params.name })
            break;
          case 'refreshIframe':
            this.refreshIframe(data.params.name);
            break;
          case 'close':
            //删除当前 activePage 相同的iframe
            if(this.iframeList && this.iframeList.length>0){
              for (let i=0;i<this.iframeList.length;i++) {
                let frame = this.iframeList[i];
                if(frame) {
                  if (frame.fullPath === this.activePage) {
                    delete this.iframeList[i]
                    break;
                  }
                }
              }
            }
            //删除 sessionStorage 该路由的缓存
            deleteDynamicRouters(this.activePage)
            this.$emit('close',this.activePage);
            break;
        }
      },
      refreshIframe(name){
        if(this.iframeList && this.iframeList.length>0){
          for (let i=0;i<this.iframeList.length;i++) {
            let frame = this.iframeList[i];
            if(frame) {
                if (frame.name === name) {
                  delete this.iframeList[i];
                  break;
                }
            }
          }
        }
      },
      setIFrameHeight(){
          //iframe-宽高自适应显示
          const oIframe = document.getElementById(this.id);
          const deviceHeight = document.documentElement.clientHeight;
          this.iframeHeight = oIframe.height = (Number(deviceHeight)-62) + 'px'; //数字是页面布局高度
      }
    }
  }
</script>

<style>
  .warp {
    margin-top: 2px;
    position: relative;
    overflow: hidden;
  }
  #fwIframe {
    /*z-index: 5000 !important;*/
  }
</style>